<template>
  <div class="search">
    <div class="searchHeader">
      <div class="sh_left">
        <i class="iconfont icon-search"></i>
        <input type="text" v-model="inputValue" placeholder="请输入内容" />
        <span v-if="noState" @click="clearValue">×</span>
      </div>
      <div class="sh_right">
        <router-link to="" class="searchBtn">搜索</router-link>
      </div>
    </div>
    <div class="searchHot">
      <h4>热门搜索</h4>
      <div class="searchList">
        <router-link :to="{path:'/more', query:{listId:1}}">米</router-link>
        <router-link :to="{path:'/more', query:{listId:2}}">蔬菜</router-link>
        <router-link :to="{path:'/more', query:{listId:3}}">水果</router-link>
        <router-link :to="{path:'/more', query:{listId:4}}">肉</router-link>
        <router-link :to="{path:'/more', query:{listId:5}}">饮料</router-link>
        <router-link to="">杂粮</router-link>
      </div>
    </div>
    <div class="lately">
      <span>最近搜索</span>
      <span>清空</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'search',
  data () {
    return {
      noState: false,
      inputValue: ''
    }
  },
  watch: {
    inputValue: function (newValue, oldValue) {
      console.log(newValue, oldValue)
      if (newValue !== '') {
        this.noState = true
      }
    }
  },
  mounted: function () {
    this.clearValue()
  },
  methods: {
    clearValue: function () {
      this.inputValue = ''
    }
  }
}

</script>

<style scope>
  .search {
    padding: 0 .32rem;

  }

  .searchHeader {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
    padding: .2rem 0;
    border-bottom: 1px solid #333;
  }

  input:focus {
    outline: none !important;
  }

  .searchHeader .sh_left {
    background-color: #f3f3f3;
    height: .64rem;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 5.8rem;
    border-radius: 5px;
  }

  .searchHeader .sh_left i {
    margin: 0 .15rem
  }

  .searchHeader .sh_left span {
    position: absolute;
    right: .2rem;
    font-size: .3rem
  }

  .searchHeader .sh_left input {
    background-color: #f3f3f3;
  }

  .sh_right a {
    font-size: .32rem;
    display: block;
  }

  .searchHot {
    padding-top: .6rem;
    border-bottom: 1px solid #333;
    padding-bottom: .2rem;
  }

  .searchHot .searchList {
    display: flex;
    flex-wrap: wrap;
  }

  .searchHot h4 {
    font-size: .28rem;
    padding-bottom: .2rem;
  }

  .searchHot a {
    font-size: .28rem;
    color: #303030;
    border: 1px solid #B5B5B5;
    border-radius: .06rem;
    margin-right: .3rem;
    margin-bottom: .3rem;
    padding: .2rem
  }

  .lately {
    display: flex;
    justify-content: space-between;
  }

  .lately span {
    font-size: .32rem;
    padding-top: .2rem;
  }

</style>
